/*
 * @Author: wwl 2967796480@qq.com
 * @Date: 2023-08-08 08:58:01
 * @LastEditors: wwl 2967796480@qq.com
 * @LastEditTime: 2023-09-21 16:04:57
 * @FilePath: \ConstantBlueCloud_WEB_USER_DZ1 - 副本\src\views\dataOverview\index.tsx
 * @Description:
 *
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
 */
import {uSelectMyDevListDataAnalyse} from '@/api/dataOverview'
import useGlobalAPI from '@/hooks/useGlobalAPI'
import {getUserId} from '@/libs/auth'
import {RouterView} from 'vue-router'
import {AlarmMsgCard} from './components/alarmMsgCard'
import {DeviceCard} from './components/deviceCard'
import {DevOverviewCard} from './components/devOverviewCard'
import {QuicklyClickCard} from './components/quicklyClick'
import {TrendsCard} from './components/trendsCard'
import {WaterAnalyzeCard} from './components/waterAnalyzeCard'
import {WaterOverviewCard} from './components/waterOverviewCard'
import './index.less'

export default defineComponent({
  name: 'CBC-home',
  setup() {
    const {route} = useGlobalAPI()

    const state = reactive<{
      devList: DataOverview.DeviceListData[] | null
    }>({
      devList: null
    })

    function getDevList() {
      const userId = getUserId()
      if (!userId) {
        return
      }
      // uSelectMyDevListDataAnalyse({userId})
      //   .then(res => {
      //     state.devList = res.data
      //   })
      //   .catch(err => {
      //     state.devList = []
      //   })
    }

    async function getPageData() {
      getDevList()
    }

    onMounted(() => {
      getPageData()
    })
    return () =>
      route.path === '/CBC/dataOverview' ? (
        <div class='grid grid-cols-3 gap-x-20 gap-y-20'>
          
          <WaterOverviewCard></WaterOverviewCard>

          <WaterAnalyzeCard></WaterAnalyzeCard>

          <DevOverviewCard class='aa'></DevOverviewCard>

          <AlarmMsgCard class='aa'></AlarmMsgCard>

          {/* <QuicklyClickCard></QuicklyClickCard> */}

          {/* <div class='col-span-2 grid grid-cols-1 gap-y-20'>
            {state.devList && state.devList.map(item => <DeviceCard devData={item}></DeviceCard>)}
          </div> */}

          <div class='col-span-1'>
            <TrendsCard class='operation-log'></TrendsCard>
          </div>
        </div>
      ) : (
        <RouterView></RouterView>
      )
  }
})
